<template>
  <div class="container">
    <a-space direction="vertical" fill :size="16">
      <!-- 时间筛选与类型选择 -->
      <a-card :bordered="false" class="filter-card" :body-style="{padding: '16px'}">
        <a-row :gutter="16" align="center">
          
          <a-col :span="12">
            <a-space>
              <a-select 
                v-model="reportType" 
                placeholder="请选择报表类型" 
                style="width: 180px"
                :options="reportOptions"
                @change="handleReportTypeChange"
              />
              
              <a-range-picker 
                v-model="dateRange" 
                style="width: 260px" 
                format="YYYY-MM-DD" 
              />
            </a-space>
          </a-col>

          <a-col :span="12" style="text-align: right">
            <a-space>
              <a-radio-group type="button" v-model="timeRange">
                <a-radio value="week">本周</a-radio>
                <a-radio value="month">本月</a-radio>
                <a-radio value="quarter">本季度</a-radio>
                <a-radio value="year">全年</a-radio>
              </a-radio-group>
              
              <a-button type="primary" @click="handleQuery">
                <template #icon>
                  <icon-search />
                </template>
                查询
              </a-button>
              
              <a-button @click="handleReset">
                <template #icon>
                  <icon-refresh />
                </template>
                重置
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-card>

      <!-- 数据概览区域 -->
      <a-row :gutter="16">
        <a-col :span="6" v-for="(card, index) in summaryCards" :key="index">
          <div class="data-card">
            <div class="card-content">
              <div class="card-title">{{ card.title }}</div>
              <div class="card-value">{{ card.value }}</div>
              <div class="card-compare" v-if="card.trend !== undefined">
                <span :class="{'up': card.trend > 0, 'down': card.trend < 0}">
                  {{ card.trend > 0 ? '+' : '' }}{{ card.trend }}%
                </span>
                <span class="compare-text">较上期</span>
              </div>
            </div>
            <div class="card-icon" :style="{ backgroundColor: `${card.color}1a`, color: card.color }">
              <component :is="card.icon" />
            </div>
          </div>
        </a-col>
      </a-row>

      <!-- 图表区域 - 每行两个图表 -->
      <a-row :gutter="16">
        <!-- 第一行图表 -->
        <a-col :span="12">
          <a-card :bordered="false" title="入库出库趋势" class="chart-card" :header-style="{padding: '12px 16px'}" :body-style="{padding: '8px'}">
            <a-spin :spinning="loadingChart">
              <div ref="inOutChartRef" class="chart-container-full"></div>
            </a-spin>
          </a-card>
        </a-col>
        
        <a-col :span="12">
          <a-card :bordered="false" title="库存周转率" class="chart-card" :header-style="{padding: '12px 16px'}" :body-style="{padding: '8px'}">
            <a-spin :spinning="loadingChart">
              <div ref="turnoverChartRef" class="chart-container-full"></div>
            </a-spin>
          </a-card>
        </a-col>
      </a-row>

      <!-- 第二行图表 -->
      <a-row :gutter="16">
        <a-col :span="12">
          <a-card :bordered="false" title="库存水平" class="chart-card" :header-style="{padding: '12px 16px'}" :body-style="{padding: '8px'}">
            <a-spin :spinning="loadingChart">
              <div ref="stockChartRef" class="chart-container-full"></div>
            </a-spin>
          </a-card>
        </a-col>
        
        <a-col :span="12">
          <a-card :bordered="false" title="产品类别占比" class="chart-card" :header-style="{padding: '12px 16px'}" :body-style="{padding: '8px'}">
            <a-spin :spinning="loadingChart">
              <div ref="categoryChartRef" class="chart-container-full"></div>
            </a-spin>
          </a-card>
        </a-col>
      </a-row>

      <!-- 仓库容量利用率 -->
      <a-row :gutter="16">
        <a-col :span="24">
          <a-card :bordered="false" title="仓库容量利用率" class="chart-card" :header-style="{padding: '12px 16px'}" :body-style="{padding: '8px'}">
            <template #extra>
              <a-select
                v-model="selectedWarehouse"
                style="width: 120px"
                @change="handleWarehouseChange"
              >
                <a-option value="all">全部仓库</a-option>
                <a-option value="cold">冷冻仓库</a-option>
                <a-option value="fresh">生鲜仓库</a-option>
              </a-select>
            </template>
            <a-spin :spinning="loadingChart">
              <div ref="utilizationChartRef" class="chart-container-full"></div>
            </a-spin>
          </a-card>
        </a-col>
      </a-row>

      <!-- 热门商品排行 -->
      <a-row :gutter="16">
        <a-col :span="24">
          <a-card :bordered="false" title="热门商品排行" class="chart-card" :header-style="{padding: '12px 16px'}" :body-style="{padding: '8px'}">
            <template #extra>
              <a-space>
                <a-button @click="handleExport">
                  <template #icon>
                    <icon-download />
                  </template>
                  导出报表
                </a-button>
              </a-space>
            </template>
            
            <a-table 
              :columns="rankColumns" 
              :data="rankData" 
              :pagination="false" 
              :bordered="false"
              stripe
            />
          </a-card>
        </a-col>
      </a-row>
    </a-space>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch, nextTick, onUnmounted, onActivated } from 'vue';
import { Message } from '@arco-design/web-vue';
import { useRouter, onBeforeRouteLeave } from 'vue-router';
import { 
  IconSearch, 
  IconRefresh, 
  IconDownload,
  IconStorage,
  IconImport,
  IconExport,
  IconCalendar,
  IconApps
} from '@arco-design/web-vue/es/icon';
import { markRaw } from 'vue';
import * as echarts from 'echarts';

// 报表类型选项
const reportOptions = [
  { label: '冷链出入库报表', value: 'inout' },
  { label: '冷链库存报表', value: 'stock' },
  { label: '冻品周转报表', value: 'turnover' },
  { label: '冷库利用率报表', value: 'utilization' }
];

// 表单数据
const reportType = ref('inout');
const dateRange = ref([]);
const timeRange = ref('month');
const loadingChart = ref(false);

// 数据概览卡片
const summaryCards = ref([
  {
    title: '冷链入库总量',
    value: '5,670',
    trend: 12.5,
    icon: markRaw(IconImport),
    color: '#165DFF'
  },
  {
    title: '冷链出库总量',
    value: '4,820',
    trend: 8.3,
    icon: markRaw(IconExport),
    color: '#F7BA1E'
  },
  {
    title: '冷链库存总量',
    value: '2,456',
    trend: -2.1,
    icon: markRaw(IconStorage),
    color: '#0FC6C2'
  },
  {
    title: '温度异常告警',
    value: '3',
    icon: markRaw(IconApps),
    color: '#F53F3F'
  }
]);

// 热门商品列表
const rankColumns = [
  {
    title: '排名',
    dataIndex: 'rank',
    width: 80,
    render: ({ record }) => {
      return {
        1: '🥇',
        2: '🥈',
        3: '🥉'
      }[record.rank] || record.rank;
    }
  },
  {
    title: '商品编码',
    dataIndex: 'code',
  },
  {
    title: '商品名称',
    dataIndex: 'name',
  },
  {
    title: '商品类别',
    dataIndex: 'category',
  },
  {
    title: '出库次数',
    dataIndex: 'outboundCount',
  },
  {
    title: '出库数量(kg)',
    dataIndex: 'outboundQuantity',
  },
  {
    title: '库存周转率',
    dataIndex: 'turnoverRate',
  },
  {
    title: '库存状态',
    dataIndex: 'stockStatus',
    render: ({ record }) => {
      const status = record.stockStatus;
      return {
        normal: {
          text: '正常',
          color: 'green',
        },
        warning: {
          text: '预警',
          color: 'orange',
        },
        critical: {
          text: '紧缺',
          color: 'red',
        },
        excess: {
          text: '过剩',
          color: 'blue',
        },
      }[status];
    }
  }
];

const rankData = ref([
  {
    rank: 1,
    code: 'BEEF-001',
    name: '澳洲冷冻牛肉',
    category: '肉类/牛肉',
    outboundCount: 356,
    outboundQuantity: 1280,
    turnoverRate: '3.2次/月',
    stockStatus: 'normal'
  },
  {
    rank: 2,
    code: 'PORK-001',
    name: '冷冻猪排',
    category: '肉类/猪肉',
    outboundCount: 245,
    outboundQuantity: 812,
    turnoverRate: '2.8次/月',
    stockStatus: 'warning'
  },
  {
    rank: 3,
    code: 'FISH-001',
    name: '冰冻三文鱼',
    category: '水产/鱼类',
    outboundCount: 189,
    outboundQuantity: 756,
    turnoverRate: '3.5次/月',
    stockStatus: 'normal'
  },
  {
    rank: 4,
    code: 'CHICKEN-001',
    name: '冷冻鸡翅',
    category: '肉类/禽类',
    outboundCount: 132,
    outboundQuantity: 528,
    turnoverRate: '3.0次/月',
    stockStatus: 'critical'
  },
  {
    rank: 5,
    code: 'SHRIMP-001',
    name: '冷冻基围虾',
    category: '水产/虾类',
    outboundCount: 98,
    outboundQuantity: 392,
    turnoverRate: '2.8次/月',
    stockStatus: 'excess'
  }
]);

// 时间范围选项
const timeRangeOptions = [
  { label: '最近7天', value: 'week' },
  { label: '最近30天', value: 'month' },
  { label: '最近90天', value: 'quarter' },
  { label: '今年', value: 'year' },
];

// 图表引用
const inOutChartRef = ref(null);
const stockChartRef = ref(null);
const turnoverChartRef = ref(null);
const categoryChartRef = ref(null);
const utilizationChartRef = ref(null);

// 图表实例
let inOutChart = null;
let stockChart = null;
let turnoverChart = null;
let categoryChart = null;
let utilizationChart = null;

// 添加一些新的变量
const selectedWarehouse = ref('all');

// 使用Vue Router
const router = useRouter();
let chartInitialized = false;

// 组件挂载时直接渲染静态图表
onMounted(() => {
  console.log('组件挂载阶段开始');
  
  // 设置默认时间范围为最近30天
  timeRange.value = 'month';
  
  // 添加窗口大小变化监听
  window.addEventListener('resize', handleResize);
  
  // 推迟初始化，确保路由转换和DOM渲染已完成
  nextTick(() => {
    setTimeout(() => {
      if (!chartInitialized) {
        initChartsWithRetry();
      }
    }, 500);
  });
});

// 路由激活时初始化图表（用于缓存路由）
onActivated(() => {
  if (!chartInitialized) {
    console.log('路由激活，初始化图表');
    initChartsWithRetry();
  } else {
    // 重新调整图表大小
    handleResize();
  }
});

// 路由离开前清理
onBeforeRouteLeave(() => {
  console.log('路由离开，清理图表资源');
  disposeAllCharts();
  chartInitialized = false;
});

// 组件卸载时清理资源
onUnmounted(() => {
  console.log('组件卸载，清理资源');
  // 移除事件监听
  window.removeEventListener('resize', handleResize);
  
  // 清理图表实例
  disposeAllCharts();
});

// 带重试的图表初始化
const initChartsWithRetry = () => {
  loadingChart.value = true;
  console.log('开始初始化图表，带重试机制');
  
  // 延迟300ms确保DOM完全渲染
  setTimeout(() => {
    try {
      initCharts();
      loadingChart.value = false;
    } catch (error) {
      console.error('首次图表初始化失败，将在500ms后重试:', error);
      
      // 失败后延迟更长时间再次尝试
      setTimeout(() => {
        try {
          // 确保DOM尺寸已计算完成
          if (inOutChartRef.value) {
            console.log('容器尺寸:', inOutChartRef.value.clientWidth, inOutChartRef.value.clientHeight);
          }
          initCharts();
          console.log('图表重试初始化成功');
        } catch (retryError) {
          console.error('图表重试初始化仍然失败:', retryError);
        } finally {
          loadingChart.value = false;
        }
      }, 500);
    }
  }, 300);
};

// 清理所有图表实例
const disposeAllCharts = () => {
  console.log('销毁所有图表实例');
  [inOutChart, turnoverChart, stockChart, categoryChart, utilizationChart].forEach(chart => {
    if (chart) {
      try {
        chart.dispose();
      } catch (e) {
        console.error('销毁图表实例出错:', e);
      }
    }
  });
  
  inOutChart = null;
  turnoverChart = null;
  stockChart = null;
  categoryChart = null;
  utilizationChart = null;
};

// 初始化所有图表
const initCharts = () => {
  console.log('开始初始化所有图表');
  
  // 确保清理现有实例
  disposeAllCharts();

  // 初始化配置
  const initOptions = {
    renderer: 'canvas',
    useDirtyRect: false
  };

  try {
    // 确保容器已设置尺寸
    const setContainerSize = (el) => {
      if (!el) return false;
      
      if (!el.clientWidth || !el.clientHeight) {
        console.warn('容器尺寸异常，尝试设置固定尺寸', el.clientWidth, el.clientHeight);
        el.style.width = '100%';
        el.style.height = '320px';
        return false;
      }
      
      console.log('容器尺寸正常:', el.clientWidth, 'x', el.clientHeight);
      return true;
    };

    // 初始化各图表
    if (inOutChartRef.value && setContainerSize(inOutChartRef.value)) {
      inOutChart = echarts.init(inOutChartRef.value, null, initOptions);
      inOutChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['入库', '出库'],
          top: 10
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '入库',
            type: 'line',
            data: [520, 630, 580, 450, 680, 720],
            itemStyle: { color: '#165DFF' }
          },
          {
            name: '出库',
            type: 'line',
            data: [480, 420, 530, 510, 490, 590],
            itemStyle: { color: '#F7BA1E' }
          }
        ]
      });
    }
    
    // 库存周转率图
    if (turnoverChartRef.value && setContainerSize(turnoverChartRef.value)) {
      turnoverChart = echarts.init(turnoverChartRef.value, null, initOptions);
      turnoverChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          top: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['冷冻牛肉', '冷冻猪肉', '冷冻禽类', '冷冻水产', '冷冻半成品', '冷冻点心']
        },
        yAxis: {
          type: 'value',
          name: '周转率(次/月)'
        },
        series: [
          {
            type: 'bar',
            data: [3.2, 2.8, 3.0, 3.5, 4.2, 3.8],
            itemStyle: { color: '#722ED1' }
          }
        ]
      });
    }
    
    // 库存水平图
    if (stockChartRef.value && setContainerSize(stockChartRef.value)) {
      stockChart = echarts.init(stockChartRef.value, null, initOptions);
      stockChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['库存', '安全库存'],
          top: 10
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '10%',
          top: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['1月', '2月', '3月', '4月', '5月', '6月']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '库存',
            type: 'line',
            data: [1860, 2010, 2160, 2080, 2270, 2400],
            itemStyle: { color: '#165DFF' }
          },
          {
            name: '安全库存',
            type: 'line',
            data: [1200, 1200, 1200, 1200, 1200, 1200],
            itemStyle: { color: '#F7BA1E' }
          }
        ]
      });
    }
    
    // 类别占比图
    if (categoryChartRef.value && setContainerSize(categoryChartRef.value)) {
      categoryChart = echarts.init(categoryChartRef.value, null, initOptions);
      categoryChart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'horizontal',
          bottom: 10,
          data: ['肉类产品', '水产品', '速冻食品']
        },
        series: [
          {
            name: '类别占比',
            type: 'pie',
            radius: '70%',
            center: ['50%', '45%'],
            data: [
              { value: 52, name: '肉类产品' },
              { value: 28, name: '水产品' },
              { value: 20, name: '速冻食品' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
    }
    
    // 利用率图
    if (utilizationChartRef.value && setContainerSize(utilizationChartRef.value)) {
      utilizationChart = echarts.init(utilizationChartRef.value, null, initOptions);
      utilizationChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          bottom: '5%',
          top: '5%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          max: 100,
          name: '利用率(%)'
        },
        yAxis: {
          type: 'category',
          data: ['A-01区', 'A-02区', 'B-01区', 'B-02区', 'C-01区', 'C-02区']
        },
        series: [
          {
            type: 'bar',
            data: [83, 91, 72, 85, 68, 75],
            itemStyle: {
              color: function(params) {
                const value = params.value;
                if (value > 90) return '#F53F3F';  // 红色，非常紧张
                if (value > 80) return '#F77234';  // 橙色，紧张
                if (value > 70) return '#FF7D00';  // 黄色，略紧张
                if (value > 50) return '#00B42A';  // 绿色，正常
                return '#165DFF';  // 蓝色，宽松
              }
            },
            label: {
              show: true,
              position: 'right',
              formatter: '{c}%'
            }
          }
        ]
      });
    }
  } catch (error) {
    console.error('初始化图表错误:', error);
    throw error;
  }

  // 标记图表已初始化
  chartInitialized = true;
  
  // 立即加载数据
  loadData();
};

// 更新图表数据
const updateCharts = () => {
  try {
    console.log('正在更新图表数据');
    // 检查图表实例是否已初始化
    if (!inOutChart || !turnoverChart || !stockChart || !categoryChart || !utilizationChart) {
      console.warn('图表实例未完全初始化，尝试重新初始化');
      initCharts();
      return;
    }
    
    // 更新出入库趋势图
    inOutChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['入库', '出库'],
        top: 10
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: 50,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '入库',
          type: 'line',
          data: [520, 630, 580, 450, 680, 720],
          itemStyle: { color: '#165DFF' }
        },
        {
          name: '出库',
          type: 'line',
          data: [480, 420, 530, 510, 490, 590],
          itemStyle: { color: '#F7BA1E' }
        }
      ]
    });
    
    // 库存周转率图
    turnoverChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: 50,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['冷冻牛肉', '冷冻猪肉', '冷冻禽类', '冷冻水产', '冷冻半成品', '冷冻点心']
      },
      yAxis: {
        type: 'value',
        name: '周转率(次/月)'
      },
      series: [
        {
          type: 'bar',
          data: [3.2, 2.8, 3.0, 3.5, 4.2, 3.8],
          itemStyle: { color: '#722ED1' }
        }
      ]
    });
    
    // 库存水平图
    stockChart.setOption({
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['库存', '安全库存'],
        top: 10
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: 50,
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '库存',
          type: 'line',
          data: [1860, 2010, 2160, 2080, 2270, 2400],
          itemStyle: { color: '#165DFF' }
        },
        {
          name: '安全库存',
          type: 'line',
          data: [1200, 1200, 1200, 1200, 1200, 1200],
          itemStyle: { color: '#F7BA1E' }
        }
      ]
    });
    
    // 类别占比图
    categoryChart.setOption({
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
      },
      legend: {
        orient: 'horizontal',
        bottom: 10,
        data: ['肉类产品', '水产品', '速冻食品']
      },
      series: [
        {
          name: '类别占比',
          type: 'pie',
          radius: '70%',
          center: ['50%', '45%'],
          data: [
            { value: 52, name: '肉类产品' },
            { value: 28, name: '水产品' },
            { value: 20, name: '速冻食品' }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });
    
    // 利用率图
    utilizationChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: 10,
        containLabel: true
      },
      xAxis: {
        type: 'value',
        max: 100,
        name: '利用率(%)'
      },
      yAxis: {
        type: 'category',
        data: ['A-01区', 'A-02区', 'B-01区', 'B-02区', 'C-01区', 'C-02区']
      },
      series: [
        {
          type: 'bar',
          data: [83, 91, 72, 85, 68, 75],
          itemStyle: {
            color: function(params) {
              const value = params.value;
              if (value > 90) return '#F53F3F';  // 红色，非常紧张
              if (value > 80) return '#F77234';  // 橙色，紧张
              if (value > 70) return '#FF7D00';  // 黄色，略紧张
              if (value > 50) return '#00B42A';  // 绿色，正常
              return '#165DFF';  // 蓝色，宽松
            }
          },
          label: {
            show: true,
            position: 'right',
            formatter: '{c}%'
          }
        }
      ]
    });
  } catch (error) {
    console.error('更新图表数据失败:', error);
  }
};

// 处理报表类型变更
const handleReportTypeChange = (type) => {
  console.log('报表类型变更:', type);
  loadData();
};

// 查询按钮
const handleQuery = () => {
  Message.success('查询成功');
  loadData();
};

// 重置按钮
const handleReset = () => {
  reportType.value = 'inout';
  dateRange.value = [];
  timeRange.value = 'month';
  loadData();
};

// 导出报表
const handleExport = () => {
  Message.success('报表导出中，请稍候...');
};

// 处理窗口大小变化，重新调整图表大小
const handleResize = () => {
  inOutChart?.resize();
  stockChart?.resize();
  turnoverChart?.resize();
  categoryChart?.resize();
  utilizationChart?.resize();
};

// 处理仓库变化
const handleWarehouseChange = (value) => {
  console.log('选择的仓库变更:', value);
  loadData();
};

// 默认数据
const loadData = () => {
  console.log('正在加载数据...');
  loadingChart.value = true;
  
  // 减少延迟时间，提高加载速度
  setTimeout(() => {
    try {
      if (chartInitialized) {
        // 更新已存在的图表
        updateCharts();
      } else {
        // 图表未初始化，重新尝试初始化
        console.warn('图表未初始化，尝试初始化');
        initChartsWithRetry();
      }
    } catch (error) {
      console.error('加载数据失败:', error);
    } finally {
      loadingChart.value = false;
    }
  }, 200);
};
</script>

<style lang="less" scoped>
.container {
  padding: 0 16px;
}

.filter-card {
  margin-bottom: 0;
}

.data-card {
  height: 104px;
  display: flex;
  padding: 20px 24px;
  background-color: var(--color-bg-2);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  margin-bottom: 16px;
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title {
  font-size: 14px;
  color: var(--color-text-2);
  margin-bottom: 8px;
}

.card-value {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text-1);
  margin-bottom: 8px;
}

.card-compare {
  font-size: 12px;
  color: var(--color-text-3);
}

.card-compare .up {
  color: #00b42a;
}

.card-compare .down {
  color: #f53f3f;
}

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  margin-left: 16px;
  font-size: 24px;
}

.compare-text {
  margin-left: 8px;
}

.chart-card {
  margin-bottom: 16px;
}

:deep(.arco-card-body) {
  padding: 8px;
}

:deep(.arco-card-header) {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-2);
}

:deep(.arco-table-th) {
  background-color: var(--color-fill-2);
}

.chart-container {
  width: 100% !important;
  height: 350px !important;
  min-width: 100% !important;
  min-height: 350px !important;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chart-container-full {
  width: 100%;
  height: 320px;
  background-color: #fff;
  position: relative;
}

.chart-container-large {
  width: 100%;
  height: 360px;
  background-color: #fff;
  position: relative;
}

:deep(.arco-spin) {
  width: 100%;
  height: 100%;
  display: block;
}

:deep(.arco-spin-element) {
  margin-top: 150px;
}
</style>